


AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction

by wafflelate



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Investigative Report, Mission Fic, Work Skin
Language: English
Status: Completed
Published: 2020-05-10
Updated: 2020-05-10
Packaged: 2021-03-02 19:00:06
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 1,545
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24111694
Author URL: https://archiveofourown.org/users/wafflelate/pseuds/wafflelate
Summary: This work provides the CSS and HTML necessary to make a fanfiction look like an investigative report or mission report, suitable for a variety of fandoms and purposes.
Comments: 6
Kudos: 61
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs, Unconventional Fanwork and Social Media Skins





	1. Example Fanwork

**Author's Note:**

> This work skin originally created for the Dreaming of Sunshine fic [Gotta Hand It To You (FILE ID: I-K-63-FEB-IN204)](https://archiveofourown.org/works/21151682), which was written for the gift exchange [Unconventional Fanworks](https://unconventionalfanworkex.dreamwidth.org/)! It should hopefully work well for small screens/on mobile (at least, I haven't gotten any complaints?) and some effort has been made to make sure the work is legible without the AO3 skin enabled, but if you use it you should probably let readers know that they should view it with the work skin on.

**Summary for the Chapter:**

> This is a live example of what it looks like when you use this work skin and accompanying HTML! With lots of lorem ipsum (placeholder text) so you can see what everything looks like without having to go read my actual fic.

  
CAPTAIN: JOHN DOE  
EMPLOYEE ID: 123456  
FILE ID: Fake Report As Example of Work Skin Usage

  
SOME OFFICE  
DEPARTMENT OF WHATEVER  
FOR SECURITY LEVEL 6 OR HIGHER  


  


**I. INTRODUCTION**

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  3. Example of a normal [link]() and also a [link that's also a file name]() because I used that a lot.
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, and the following items:   
— List-within-a-list item 1   
— List-within-a-list item 2   
— List-within-a-list item 3
  5. Lorem ipsum dolor sit amet, ███████████ adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad █████ ██████, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████.



**II. YOU CAN JUST CONTINUE THE LIST**

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



**III. MAYBE YOU DON'T WANT A LIST ACTUALLY**

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  



	2. CSS for the Work Skin

**Summary for the Chapter:**

> This chapter has the CSS you need for the work skins, as well as instructions on how to create a new work skin.

The first thing you'll need to do is create a work skin! Work skins are CSS that change how elements in the works are displayed. I've added comments to this but just so you know the comments will disappear when you save it on AO3.

To make a work skin, go to the "Associations" section of a new work and at the bottom of the section click "Public Work Skins"... or just go [here](https://archiveofourown.org/skins?skin_type=WorkSkin)! Then go to "Create Work Skin" and put in the CSS. Also give it a name you'll remember, because you'll have to apply the work skin to your work!

Here is the CSS:

> 
>     /* This changes how the section headers look! You can increase the font size or weight or whatever here! */ 
>     #workskin .section {
>       font-weight: 700;
>       clear: both;
>     }
>     
>     /* This removes the spaces between the black rectangles but doesn't allow line breaks, so it's suitable for redacting single words. */ 
>     #workskin .sanitized {
>       letter-spacing: -0.1em;
>     }
>     
>     /* This removes the spaces between the black rectangles but does allow line breaks, so it's best for redacting phrases, sentences, or paragraphs.*/ 
>     #workskin .sanitizedlong {
>       word-break: break-all;
>       letter-spacing: -0.1em;
>     }
>     
>     /* This makes links the same color as the text and removes the underline. I used links in the original work to link to the wiki pages of minor canon characters and stuff so that the reader could refresh their memory despite me not being able to give much additional context, but I didn't want obvious hyperlinks to interrupt the look of the work. Also, I needed to underline a bunch of stuff that weren't links, so just keeping the underline wouldn't have worked. Depending on what you're doing with this, you might want links to be colored and underlined instead; you can changed that here. */ 
>     #workskin .report a {
>       color: inherit;
>       border-bottom: none;
>     }
>     
>     /* This adds an asterisk after all links, so that readers know there's something to click on. You can change "after" to "before" if that works better for you or delete this if it's not useful.*/ 
>     #workskin .report a::after {
>       content: "*";
>     }
>     
>     /* In my work, I wanted all file names to be underlined, so this does that. */ 
>     #workskin .filename {
>       text-decoration: underline;
>     }
>     
>     /* This is the top part of the work, which has two columns (one left justified, one right justified) with three lines each. You could  have more or less lines. */ 
>     #workskin .header {
>       margin-bottom: 1em;
>     }
>     
>     /* I know this is going to surprise you, but this one makes a divider between the header and the rest of the report! */ 
>     #workskin .divide {
>       margin-bottom: 1em;
>       line-height: 0em;
>       border-bottom-style: double;
>       border-bottom-width: 5px;
>       clear: both;
>     }
>     
>     /* This just makes the divider the right shape. Nice and slim. */ 
>     #workskin .divide p {
>       margin: 0em;
>       line-height: 0em;
>     }
>     
>     /* This is the bottom divider. */ 
>     #workskin .divide2 {
>       margin-bottom: 2em;
>       margin-top: 1em;
>       line-height: 0em;
>       border-bottom-style: double;
>       border-bottom-width: 5px;
>       clear: both;
>     }
>     
>     #workskin .divide2 p {
>       margin: 0em;
>       line-height: 0em;
>     }
>     
>     /* Keeps paragraphs inside the header tag from having a big gap above them. */ 
>     #workskin .header p {
>       margin-top: 0em;
>     }
>     
>     /* Makes some stuff bold but not AS bold as using the strong tag. */ 
>     #workskin .lessbold {
>       font-weight: 600;
>     }
>     
>     /* Makes the stuff on the left side of the header be close together heightwise. */ 
>     #workskin .filehleft {
>       line-height: 1em;
>     }
>     
>     /* Makes stuff on the right side of the header be close together heightwise and also properly to the right and also nice and bold for emphasis. */ 
>     #workskin .filehright {
>       float: right;
>       text-align: right;
>       position: relative;
>       margin-top: -5.5em;
>       font-weight: 900;
>       line-height: 1em;
>     }
>     
>     /* This hides things that people only need to see if they're viewing without the work skin. I learned this from La_Temperanza's iOS texting tutorial! */ 
>     #workskin .hide {
>       display: none;
>     }
>     
>     /* I needed to do a list within my list with a different symbol than the bullet point that AO3 defaults to. This makes the list items indent and stick close together vertically. */
>     #workskin .filelistitem {
>       margin-left: 1.75em;
>       margin-top: .25em;
>       display: block;
>     }
>     
>     /* This adds an em dash before every list item. You can change it to a different symbol by looking up CSS symbol codes! */
>     #workskin .filelistitem:before {
>       content: "\2014";
>       padding-right: 8px;
>     }
>     


	3. Example HTML

**Summary for the Chapter:**

> This is the HTML so you can see how everything in the first chapter was constructed! AO3 will change how this is arranged after the first time you preview or post, but it will still work. Note especially that you will need to paste in the █ symbols!

> 
>     <div class="report">
>     <div class="header">
>     <br />
>     <span class="filehleft"><span class="lessbold">CAPTAIN:</span> JOHN DOE<br />
>     <span class="lessbold">EMPLOYEE ID:</span> <span class="filename">123456</span><br />
>     <span class="lessbold">FILE ID:</span> <span class="filename">Fake Report As Example of Work Skin Usage</span></span>
>     
>     <div class="filehright">
>     SOME OFFICE<br />
>     DEPARTMENT OF WHATEVER<br />
>     FOR SECURITY LEVEL 6 OR HIGHER<br /></div><div class="divide">
>     </div>
>     
>     <p>
>     <strong><span class="section">I. INTRODUCTION</span></strong>
>     </p>
>     <ol>
>      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
>     <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
>     <li>Example of a normal <a href="" rel="nofollow">link</a> and also a <a href="" rel="nofollow"><span class="filename">link that's also a file name</span></a> because I used that a lot.</li>
>     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, and the following items: 
>     <span class="filelistitem"><span class="hide"><br />
>          — </span>List-within-a-list item 1</span>
>     <span class="filelistitem"><span class="hide"><br />
>          — </span>List-within-a-list item 2</span>
>     <span class="filelistitem"><span class="hide"><br />
>          — </span>List-within-a-list item 3</span>
>     </li>
>      <li>Lorem ipsum dolor sit amet, <span class="sanitized">███████████</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad <span class="sanitized">█████</span> <span class="sanitized">██████</span>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  <span class="sanitizedlong"> █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████</span>.</li> 
>     </ol>
>     
>     <p>
>     <strong><span class="section">II. YOU CAN JUST CONTINUE THE LIST</span></strong>
>     </p>
>     <ol start="6">
>     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
>     <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
>     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> 
>     </ol>
>     
>     <p><strong><span class="section">III. MAYBE YOU DON'T WANT A LIST ACTUALLY</span></strong>
>     
>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
>     
>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
>     
>     
>     </div>
>     <div class="divide2">
>     </div>
>     </div>
>     

**Author's Note:**

> This is my first time posting anything like this so please let me know if you have any questions!
> 
> Also as of when I am posting this (May 10th, 3:30pm EDT) there are about 5 hours left for nominations for this round of Unconventional Fanworks Exchange! I've nominated some stuff and might sign up — I hope you'll give it a look! You can request and offer things like in-universe documents, meta, fanvids, cross-stitch designs...lots of fun stuff! [Here are the nomination guidelines and other rules](https://unconventionalfanworkex.dreamwidth.org/7722.html#cutid1) and [here is the tagset](https://archiveofourown.org/tag_sets/4036).


End file.
